<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>示例页面</title>
</head>

<body>
<!-- 这里是页面的其他HTML内容，如导航栏等 -->
<ul class="navbar-nav">
    <li class="nav-item">
        <a class="nav-link active" href="#" data-page="index" data-url="/dev/views/index.html">首页</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" href="#" data-page="purchase-guide" data-url="/dev/views/gczl.html">购车指南</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" href="#" data-page="contact-us" data-url="/dev/views/lxwm.html">联系我们</a>
    </li>
</ul>

<!-- 将script标签放在这里，确保DOM加载完成后再执行代码 -->
<script>
    // 等待页面加载完成
    window.onload = function () {
        // 获取所有的导航链接元素
        var navLinks = document.querySelectorAll('.navbar-nav a');

        // 遍历每个导航链接元素
        navLinks.forEach(function (link) {
            // 为每个导航链接添加点击事件
            link.addEventListener('click', function (e) {
                e.preventDefault(); // 阻止默认的链接跳转行为

                // 获取链接元素上的自定义数据属性值
                const page = this.dataset.page;
                const url = this.dataset.url;

                // 根据页面标识进行一些额外的操作（这里可根据实际需求扩展，比如记录页面访问日志等）
                if (page === "index") {
                    console.log("即将跳转到首页");
                } else if (page === "purchase-guide") {
                    console.log("即将跳转到购车指南页");
                } else if (page === "contact-us") {
                    console.log("即将跳转到联系我们页");
                }

                // 执行跳转
                window.location.href = url;
            });
        });
    };
</script>
</body>

</html>